طراحی وب سایت
درباره سایت
آخرین مطالب
امکانات وب
زماني که تيم برنرز لي، مخترع وب در آگوست سال ???? در حال طراحي اولين وب سايت جهان بود، فکرش را نمي کرد که طي کمتر از دو دهه اين کار به يک هنر و تخصص مهم تبديل شود و کاربران اينترنت با استفاده از تکنيک هاي بديع شاهد طراحي وب سايت هاي کاملا هنرمندانه و خلاقانه گرافيکي باشند.
در آن زمان، سايت هاي اينترنتي با کدهاي ساده «HTML» نوشته مي شدند. HTML يک زبان کدنويسي بود که ساختار ساده اي به وب سايت ها طراحی مي داد. با استفاده از اين زبان برنامه نويسي طراحي سرتيتر و پاراگراف و پيوند دادن به صفحه هاي وب ديگر ممکن مي شد. اين روش در مقايسه با روش هاي ديگر، راه تازه و متفاوتي بود که کاربران با استفاده از آن به سادگي مي توانستند با به کارگيري يک مرورگر، صفحه هاي پيوند شده را باز کنند.
با پيشرفت وب زمينه اي ايجاد شد تا انعطاف بيشتري به امکانات وب سايت ها داده شود و کم کم واژه و اصطلاح "هنر طراحي وب سايت" بر سر زبان ها افتاد. اهميت بهره مندي همزمان از مهارت هاي مختلف موجب شد تا يک طراح وب سايت امروزي مجبور به آموزش بيش از ?? مهارت باشد تا بتواند در اين حوزه به فعاليت بپردازد.
در زمينه طراحي وب سايت مسائل و جنبه هاي گوناگوني بايد در نظر گرفته شود و به سبب پيشرفت روزافزون اينترنت و خلاقيت هاي فزاينده طراحان وب سايت ها، همواره بر اين موارد افزوده مي شود. اين امر موجب مي شود هر روز شاهد پديد آمدن وب سايت هايي با شکل و ايده جديد باشيم. اهميت و ظرافت در اين کار به جايي رسيده است که در حوزه روانشناسي نيز گرايشي در اين زمينه ايجاد شده و توجه گرافيست ها و هنرمندان به اثرات روانشناختي رنگ ها، وب سايت هاي مدرن و تاثيرگذاري را خلق کرده است.
يک طراح وب با در نظر گرفتن هدف سايت و مخاطبان آن و با استفـاده از المان هاي متناسب با رويکرد سايت و به کمک ذهن خلاق و ذوق هنري خود، طرحي خلق مي کند که ضمن ايجـاد يکپارچگي در تمامي صفحات وب سايت، نماهاي تکرار شونده و خسته کننده اي را در معرض ديد مخاطب قرار ندهد.
يکي از هنرمندانه ترين انواع طراحي هاي وب سايت که به خصوص در عصر وب ? مورد توجه قرار گرفته، "وب سايت هايي با پس زمينه بزرگ" است. اين ايده نو که به علت ارتقا سرعت اينترنت و افزايش دقت و رزولوشن نمايشگرها مورد توجه قرار گرفته، بيشتر در وب سايت هاي شخصي، گالري تصاوير، وب سايت هاي تخصصي و داراي موضوع خاص، سايت هاي تبليغاتي، سايت هاي معرفي کننده هتل ها و اماکن توريستي و... قابل مشاهده است. هدف اصلي در طراحي اين وب سايت ها ايجاد يک تاثير خيره کننده و مفهومي بر مخاطب است.
يکي از عواملي که موجب محبوبيت اين نوع طراحي در چند سال اخير شده، دميدن روح به وب سايت هاي خشک و کسل کننده نسل قديم بود به طوري که با ورود به اين وب سايت ها يک احساس خوشايند به بيننده دست مي دهد. اين سايت ها در بيشتر موارد با استفاده از هنر انيميشن سازي جذاب تر طراحی و پوياتر مي شوند که اوج آن را در وب سايت هاي مجهز به Full Flash Template نيز مي توان مشاهده کرد. ترکيب گرافيک مناسب و فايل هاي متحرک زيبايي سايت هاي ياد شده را دو چندان کرده است.
پيش از آنکه به چنين نکاتي بپردازيد بد نيست که به چند مسئله مهم و اساسي در زمان طراحي يک وب سايت مدرن و پيشرفته توجه کنيد.
نکته اول آنکه چه نوع وب سايتي مدنظر شماست؟ وب سايت شما مي تواند به صورت يک بروشور طراحي شود که حاوي اطلاعات مختصري از نوع خدمات و توليدات شماست. همچنين يک وب سايت مي تواند تفريحي باشد که بينندگان خاص خود را در بخش سرگرمي دارد و معرف شما نيز است يا يک وب سايت تجارت الکترونيکي که هدف آن ايجاد بازاري در دنياي مجازي به همراه يک معرفي کامل از شرکت شماست.
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: maryam
تفاوت اينترنت و شبکه جهاني وب چيست؟
از زماني که اينترنت در حد نيروي برق همه گير شده، عبارات « اينترنت » و « شبکه جهاني وب » متدوالا و به اشتباه به جاي يکديگر استفاده شده اند. اين روزها بارها عبارات « جست و جوي اينترنت » و « جست و جوي وب » را به کار مي بريم و يا اين عبارات را از افراد پيرامون خود مي شنويم. در حالي که اين دو مساله کاملا با هم متفاوت هستند.
در اين مقاله از ديفوراف، تلاش ما اين است که اين اشتباه را يک بار و براي هميشه رفع کنيم. از يک سو، اينترنت را مي توان سخت افزار نت دانست زيربنايي که از پروتوکلي خاص استفاده مي کند و باعث مي شود همه چيز در کنار هم با هماهنگي کامل کار کنند. اما از سويي ديگر شبکه جهاني وب همان نرم افزار وب است شبکه اي عظيم از نرم افزار ها و پروتوکل ها که ارتباط دهنده همه اجزا با يکديگر است.
در واقع وب همانطور که از اسمش پيداست مثل يک تار عنکبوت عظيم است که اجزاي تشکيل دهنده آن، ميليارد ها ميليارد کاربر در سراسر جهان هستند که از اين شبکه جهاني استفاده مي کنند.
اينترنت در برابر شبکه جهاني وب:
بنابراين شبکه اي که ما آن را با عنوان اينترنت مي شناسيم را متشکل از دو لايه تصور کنيد. لايه اي مستحکم را متصور شويد که از سيم ها، سرور ها، روتر ها، سوييچ ها، کامپيوتر ها و هر آنچه که به صورت فيزيکي شبکه اي در سر تا سر جهان ايجاد کرده تشکيل شده است. اين همان چيزي است که به آن « اينترنت » مي گوييم.
اينترنت چگونه طراحي شده:
در يک توضيح مختصر و کوتاه، اينترنت در ابتدا زيرساختي بود که پايه هاي آن از سال ???? و در نتيجه تلاش هاي آژانس پروژه هاي تحقيقاتي پيشرفته وزارت دفاع آمريکا براي ايجاد يک شبکه ارتباطي قوي در رابطه با جنگ ايجاد شد که اين شبکه ARPAnet نام گرفت که مخفف Advanced Research Projects Agency Network بود.
اين شبکه فيزيکي، مراکز تحقيقاتي که بر روي پروژه هاي امنيتي تمرکز داشتند را با بخش هاي دولتي و نظامي مرتبط ساخت. در واقع اين آرپانت بود که در طول سالها تغيير و تحول به چيزي تبديل شد که ما امروز آن را « اينترنت » مي خوانيم.
اما شبکه جهاني وب، در واقع مغز همه چيز است که همه سخت افزار و زيربناي اينترنت را به شکل نرم افزار ها وارد سرور ها و کامپيوتر ها مي کند. اين مجموعه شامل مرورگر هاي اينترنت و نرم افزار هايي مي شود که از طريق پروتوکل TCP/IP ( يکي از مهم ترين پروتوکل هاي استفاده شده در شبکه هاي کامپيوتري ) با هم در ارتباط هستند.
امروزه ديگر فقط صحبت از کامپيوتر ها و مرورگر هاي وب در ميان نيست. مردم ديگر به صورت فيزيکي و با استفاده از دستگاه هايي چون تبلت ها، اسمارت فون ها، موزيک ديوايس ها، کنسول هاي بازي، تلويزيون ها و حتي وسايلي مثل قاب عکس ها و دوربين هاي ديجيتال به اينترنت متصل مي شوند. تقريبا تمام دستگاه ها به اينترنت وصل مي شوند و به کاربران خود اين امکان را مي دهند تا به راحتي به سازه عظيم اينترنت دسترسي يابند.
اما همه اين موراد چطور کار مي کنند؟ فرض کنيد شما در اتاق خود نشسته ايد و با لپ تاپ يا تبلت خود به اينترنت متصل مي شويد. اولين کاري که مي کنيد اين است که در مرورگر، آدرس www.d4fteam.com را تايپ مي کنيد و سپس Enter را مي زنيد ( اولين کارتان همين است… مگر نه؟ :) ) همين که اينتر را مي زنيد، اطلاعات مربوطه را از شبکه جهاني وب که همان بخش نرم افزاري شبکه اطلاعات و ارتباطات است درخواست مي کنيد. پس از فشار دادن کليد اينتر، مسير ترافيک به اين شکل خواهد بود:
درخواست شما از کامپيوترتان به روتر و به ISP شما فرستاده مي شود. ترافيک اين URL بر اساس پيکربندي سرور هاي DNS منطقه شما هدايت مي شود. هر دامين ثبت شده اي در سرور هاي DNS سراسر دنيا ليست شده است تمام هدف اين سرورها فراهم آوردن IP آدرس هايي است که اطلاعات ( صفحات وب ) در آن ذخيره شده اند. سرور DNS در پاسخ، اطلاعات IP را ارسال مي کند. بنابراين حالا ISP مي داند که به کجا رجوع کند تا صفحات وب مورد نظر شما را پيدا کند.
ترافيک در ادامه مسير به شبکه هاي Network Service Provider يا همان NSP مي رسد. NSP در واقع شامل شبکه هايي مثل SprintNet، IBM، PSINet و… مي شود. اين شبکه ها، ستون فقرات شبکه هاي اينترنتي هستند. اگر مي توانستيد اطلاعات مورد نظرتان که در مسير اينترنت در جريان است را ببينيد، آنگاه مي ديديد که ترافيک ابتدا به نزديکترين NSP مي رسد و سپس از درگاه هاي Network Access Point يا NAP عبور مي کند که به ترافيک امکان مي دهد تا از يک NSP به NSP ديگر برود.
در نهايت درخواست شما به يک ريموت کامپيوتر در اينجا وب سرور مي رسد که وب سرور با ارسال صفحات وب مورد نظر به درخواست شما پاسخ مي دهد. سپس ترافيک از همان مسير بازمي گردد تا به کامپيوتر شما برسد. همه اين اتفاقات بسيار سريع و در يک چشم به هم زدن رخ مي دهند.
شبکه جهاني وب چگونه طراحي شده:
هر صفحه وبي که روي يک سرور ذخيره شده را يک « گره » تصور کنيد که مي تواند شامل اتصالاتي به گره هاي فراوان ديگر در اين شبکه بزرگ باشد. هر گره مي تواند يک بخش از هر نوع اطلاعاتي باشد متن، تصوير و يا هر نوع اطلاعات ديگر که به اينترنت متصل است. اين اتصلات داخلي بين گره ها است که شبکه جهاني وب را تشکيل مي دهد. در واقع اين شبکه اي از اتصالات است که مارپيچ مجازي اطلاعات را مي سازد شبکه اي که با سرعتي بسيار فراتر از سرعت گسترش فيزيکي خود اينترنت، به گسترش و توسعه ادامه مي دهد.
نتيجه:
اين دو در کنار هم شبکه عظيمي را تشکيل مي دهند که دنياي ما را در بر گرفته و همه ما را طوري با هم مرتبط کرده که بدون اين شبکه مي توان گفت امکان اين ارتباط وجود نداشت. با اينکه دو بخش اساسي اين شبکه يکسان نيستند، اما هر کدام از اين دو نقش بسيار مهمي در تشکيل شبکه جهاني و عظيم فضاي مجازي بازي مي کنند.
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: maryam
اين کتاب براي کساني مفيد است که از طراحي سايت اطلاعي ندارند و مي خواهند تازه به جمع طراحان سايت ملحق شوند پس مسلما از ساده ترين نکات آغاز مي شود .
اين کتاب شما را با HTML و CSS آشنا ميکند و راه را براي ساخت يک وب سايت استاندارد به شما نشان مي دهد. ذکر اين نکته لازم است که ترجمه خط به خط کتاب ارائه نمي شود و چيزي که به عنوان
برداشت شخصي من يک طراح سايت (بهزاد علي بيگي) از کتاب مي باشد در قالب مقالات آموزشي براي شما بيان خواهد شد.
سعي مي کنم در هر مقاله حداکثر يک فصل از کتاب را آموزش دهم و مسلما با بازخوردي که از خوانندگان خواهم گرفت کيفيت کار و هم چنين وسعت کار را افزايش خواهم داد.
فصل اول:
Setting up Shop
اين فصل در واقع آماده کردن کامپيوتر براي کار، قبل از زدن اولين طرح شماست.
قبل از اين که وب سايت خودتان را بسازيد، مي بايست کامپيوتر خود را براي کار آماده نماييد که شامل برنامه هايي است که يا در سيستم شما موجود مي باشد و يا اين که مي بايست آن ها را نصب نماييد.
برنامه هاي زيادي در بازار موجود مي باشد ولي در ابتدا از برنامه هاي رايگان و قابل دسترس استفاده مي کنيم.
وسايل و برنامه هاي اصلي که شما نياز داريد:
چون اکثر کاربران ما درايران از ويندوز استفاده مي کنند پس ابزارهاي موجود در ويندوز را بررسي خواهيم کرد.
ابزارهاي اوليه در ويندوز:
1- اديت کردن متن : براي اديت کردن متن در ويندوز مي توانيد از Notepad استفاده نماييد. اين متن، همان صفح? وب است .
براي دسترسي به اين برنامه در محيط ويندوز مسير زير را طي کنيد:
Start > All Programs > Accessories > Notepad
2- ديدن خروجي فايل : براي ديدن کار خروجي مي بايست از مرورگر و يا browser استفاده کنيم. مرورگرهاي متفاوتي وجود دارد که بحث آنها بسيار مفصل است ولي در محيط ويندوز مرورگر
Inteet Explorer در دسترس است.
شما مي توانيد آن را در دسکتاپ خود و يا Quick Launch ويا فولدر برنامه ها و يا در منوي start پيدا کنيد.
3- براي فرستادن صفحه به محيط وب از دستور ftp استفاده خواهيم کرد که در ادامه به آن اشاره ميکنم.
ابزارهاي ديگر:
براي اديت کردن صفحات خود مي توانيد از برنامه NoteTab استفاده کرد .مزيت استفاده از آن اينست که مي توانيد تب هاي مختلفي را براي صفحات مختلف باز کنيد و بعد از بستن هم در حافظه ش مي ماند
همچنين مرورگرهاي گوناگوني وجود دارد که استفاده از آن ها را در کنار Inteet Explorer توصيه مي کنم. اما در اينجا از يکي از بهترين آنها را نام مي برم : firefox
اما همه عناصر که متن نيستند شما براي ويرايش عکس هم به برنامه هايي نياز داريد که مي توانيد از برنامه هاي زير استفاده کنيد:
Adobe photoshop
Adobe fireworks
Picasa
توصيه من استفاده از فتوشاپ است ، نگران نباشيد يادگيري آن براي کاربرد وب آسان است.
مرحله آخر - درست کردن مکاني است براي فايل هاي ساخته شده :
بعد از ساختن فايل هاي خود مديريت آنها بسيار مهم است و اين که در کجا فايل اصلي و در کجا تصاوير قرار گيرد و به همين ترتيب تمام عناصر وب سايت.
شما بايد يک فولدر بسازيد و تمام عناصر وب سايت خود را در آن قرار دهيد. فرض کنيد در دسکتاپ خود مي خواهيد يک وب سايت بسازيد.
سپس نام وب سايت را انتخاب نماييد .حالا يک فولدر داريد که فايل اصلي به همراه تصاوير و css ,html ,..... را داخل آن قرار مي دهيد.
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: maryam
با قسمت نهم آموزش طراحي سايت از پايه در خدمتتون هستم و اميدوارم اين مقاله هم مانند مقاله هاي گذشته بازخورد هاي خوبي داشته باشد . در اين مقاله راجع به سي اس اس ( css) و نحوه استايل دهي به آن صحبت خواهم کرد .
براي اينکه بتوان به صفحه وب سايتمان ظاهري زيبا بدهيم مي بايست با css اين کار را انجام داده و يا به عبارتي به عناصر وب سايتمان سبک بدهيم.
Body{
Font-family: verdana;
}
فونت استفاده شده در اينجا verdana است و اگر درون تگ body قرار گيرد باعث مي شود که تمامي متن هاي مورد استفاده در سايت، از اين فونت استفاده کنند. حال اگر بخواهيم تگي در سايتمان با فونت ديگري نمايش يابد، به طريقي جداگانه به آن استايل مي دهيم که البته کمي جلوتر آن را توضيح خواهم داد.
در نظر بگيريد که کاربري از سايت شما ديدن کند و فونت verdana روي سيستم خود نصب نکرده باشد، حالا چه اتفاقي ميافتد؟
در اين حالت مرورگر خودش حدس مي زند و بهترين فونتي را که به فونت انتخاب شده شما نزديک است انتخاب مي کند. اما ما مي توانيم خودمان اين کار را انجام دهيم و آن را از حيطه حدس زدن مرورگر خارج نماييم. اين کار از طريق همان font-family انجام مي گيرد، به مثال زير توجه کنيد :
Body{
Font-family: verdana, Helvetica, Arial, San-serif ;
}
اين خط به مرورگرها اعلام مي کند که اگر فونت verdana بر روي سيستم کاربر نصب نبود و لود شدن اين فونت براي عناصر موجود در درون صفحه سايت موفقيت آميز نبود، از فونت Helvetica استفاده کن، اگر Helvetica نيز نصب نبود از Arial براي لود شدن متون صفحه استفاده کن، در غير اينصورت از يکي از فونت هاي San-serif که بر روي سيستم کاربر نصب است استفاده کن.
اين css را به فايل css خود اضافه کنيد و سپس آن را ذخيره نماييد، صفحه وب سايت را با مرورگر روي سيستم تان باز کنيد، خواهيد ديد که فونت هاي موجود در صفحه همگي verdana شده اند. مانند شکل زير:
design-web-91.jpg
فونت San-serif :
اين فونت از جمله فونت هايي است که براي مطالعه کردن و پرينت گرفتن بسيار مناسب مي باشد و خوانايي آن به دليل آنکه فونت آن( بدون لبه) ساده است و کلمات را با حداقل شکستگي در فونت نمايش مي دهد بسيار آسان است.
فونت serif يا لبه دار در پايين نمايش داده شده است :
design-web-93.jpg
اگرچه استفاده از اين فونت براي پرينت گرفتن بسيار مناسب است اما توجه داشته باشيد که گاهي اوقات براي وب سايت ها اين فونت پيشنهاد نمي شود چرا که اگر سايز فونت کوچک باشد نمي توان در سايز کوچک ظرافت فونت را به خوبي نمايش داد، پس اين فونت براي سايت هايي که سايز فونت آنها کوچک است توصيه نمي گردد.
مطلب آخر اينکه توجه کنيد که حتما بين دو کلمه san و serif حتما " - " را قرار دهيد.
سبک دهي به عناوين :
اولين عنصري که در سايت به آن استايل مي دهيم تيتر موجود در صفحه است که آن را با تگ h1 مشخص مي کنيم، حالا بياييد چند استايل به اين تگ مان اضافه کنيم.
h1 {
Font-family: " Trebuchet MS ", Arial, Helvetica, San-serif;
}
اين خط css بيان مي کند که تمامي عناوين صفحه Trebuchet MS مي شوند در حاليکه ساير متون صفحه verdana خواهند بود.
h2 {
Font-family: byekan, Arial, Sans-Serif;
}
تمامي تيتر هاي سايت و عناوين از خط فوق استايل خود را مي گيرند در حالي که ساير متون سايت فونت تگ body يعني tahoma را مي خوانند.
body {
Font-family: Tahoma,Serif,Sans-Serif;
}
همانطور که مي بينيد براي فونت Trebuchet MS از دبل کتيشن استفاده شد، اما براي ساير فونت ها استفاده نکرديم، به طور کلي اگر اسم فونت انتخابي مان تک کلمه اي باشد نيازي به استفاده از کتيشن نيست در غير اينصورت براي نام فونت هايي که دو يا سه کلمه اي هستند(مثل: "Times New Roman") حتما از کتيشن استفاده مي کنيم.
design-web-92.jpg
جهت مشخص شدن موضوع مثال ديگري نيز براي شما مي زنم، به عنوان مثال در سايت شرکت وب اسکالا تيتر هاي صفحه byekan است و سايز متون صفحه Tahoma .
توضيح : يکي از مشکلاتي که در وب فارسي با آن مواجه هستيم، محدوديت فونت است که معمولا به 3 نوع فونت ختم مي شود اما اخيرا" امکان درج انواع فونت ها در صفحه وجود دارد .
چند نکته :
اگر مرورگر خود را refresh کردين و تغييرات را مشاهده نکردين، ابتدا بررسي کنيد و ببينيد که آيا پس از اعمال تغييرات CSS خود را ذخيره کرده ايد يا نه. اگر اين مورد درست بود بررسي کنيد و ببينيد که آيا لينک CSS خود را درست داده ايد و اسم آن را درست تايپ کرده ايد، آخرين مورد نيز ممکن است به دليل cache کردن مرورگرتان باشد، که در اين صورت براي مرورگر IE از دکمه R + Ctrl استفاده مي نماييد و براي مرورگر فاير فاکس Ctrl + F5 کمک مي گيريد، تا cache مرورگر خود را پاک نماييد.
حالا بياييد کمي ظاهر سايت را عوض کنيم، در اين قسمت ويژگي هاي بيشتري به تگ body مان مي افزاييم و ظاهر منو را نيز تغيير مي دهيم، CSS زير را به فايل CSS خود اضافه کنيد.
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
h1{
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
li{
font-size: small;
}
h2{
color: blue;
font-size: medium;
font-weight: normal;
}
p{
font-size: small;
color: navy;
}
حالا پس از ذخيره کردن فايل css تان مرورگر خود را يکبار ديگر refresh نماييد و تصويري مشابه با تصوير زير ملاحظه نماييد.
design-web-94.jpg
حالا توضيح خصوصيات اضافه شده در بالا:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
خصوصيت بعدي line-height است که با افزايش دادن مقدار آن مي توان فواصل بين خطوط متن را بيشتر کرد و خصوصيت padding نيز براي ايحاد فاصله ميان تگ مورد نظر و عنصر خارجي آن که درون تگ body قرار دارد مي باشد. اين فاصله را مي توان براي هر چهار جهت بالا، پايين، چپ و راست و با يک يا دو و يا تنها سه جهت آن قرار داد. انشالله در فصل بعدي در مورد padding به طور کامل توضيح خواهم داد.
تنها نکته باقي مانده مقدار دهي به padding است که به صورت عددي در مبناي پيکسل استفاده مي کنيم، مانند px15 و اين مقدار باعث ايجاد فاصله براي body مي شود که مطالب سايت از هر چهار جهت به اندازه px15 فاصله يابد. همانطور که قبلا نيز اشاره کرديم، واحد پيکسل براي سايز دهي به تصاوير نيز به کار مي رود، اصولا پيکسل کوچکترين واحد موجود در صفحه نمايش است.
همانطور که گفتيم به متون سايت نيز مي توان هم رنگ و هم سايز داد، همانطور که در تصوير فوق ديديد رنگ استفاده شده در اينجا ، آبي است.
p{
font-size: small;
color: navy;
}
براي منو نيز سايز فونت را small در نظر گرفتيم که با توجه به نوع مرورگر سايز پيش فرض small آن ، در مرورگرهاي مختلف تفاوت دارد، محدوده مقدار دهي آن small, medium, large, x-large و xx-large است.
براي تگ h1 نيز سبک جديدي از استايل دهي را قرار مي دهيم، چون اين تگ براي تيتر اصلي صفحه استفاده مي شود، سايز آن را بسيار بزرگ يا همان x-large انتخاب کرديم.
h1{
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
و براي تگ h2 سايز فونت را متوسط برگزيديم.
و تگ p تنها سايز و رنگ گرفته است .
با اين مثال ها سبک دهي به عناصر را آغاز کرديم ولي تازه شروع کار است .
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: maryam
آموزش قرار دادن يک تصوير در زمينه صفحه
براي قرار دادن يک تصوير به عنوان زمينه صفحه بايد از تگ BODY استفاده کرد.وقتي که تگ BODY را پيدا کرديد ممکن است به صورت ساده باشد يا با فرمانهايي که به آن اضافه شده است. مانند زير:
<body bgcolor="#66ccff" text="#000000">
کاري که شما بايد انجام دهيد، اضافه کردن يک شناسه به تگ BODY است. بنابراين يک فاصله بعد از آخرين فرمان بگذاريد و سپس اين فرمان را وارد کنيد:
background=" "
اکنون تگ BODY شما بايد به اين صورت باشد (اگر فرمانهاي ديگري به آن اضافه نکرده باشيد):
<body background=" ">
حالا بايد آدرس عکس را بين دو دابل کوت قرار دهيم. براي اين کار دو راه وجود دارد:
براي اين کار اگر صفحه و عکس در يک مسير هستند مي توانيم فقط نام کامل عکس با پسوند آنرا بنويسيم. مثلاً:
<body background="image.gif">
اگر از قرار داشتن صفحه و عکس در يک مسير مطمئن نيستيد يا عکس و صفحه در يک مسير نيستند مي توانيد از آدرس کامل عکس استفاده کنيد.
<body background="http://www.example.com/image.gif">
تصاوير براي زمينه بايد با يکي از دو فرمت GIF يا JPG باشند. اگر عکس به اين صورت نبود بايد آن را با برنامه اي مثل Paint Shop Pro يا Photoshop به يکي از اين فرمتها تبديل کرد.
براي مثال فرض کنيد يک عکس با نام background.jpg داريم که در اين مسير قرار دارد: http://www.mysite.com/img . حال اگر بخواهيم صفحه اي را در پوشه اي به غير از پوشه img در اين سايت طراحي کنيم بايد از آدرس کامل عکس يعني http:www.mysite.com/img/background.jpg استفاده کنيم. و تگ BODY ما به اين صورت در مي آيد:
<body background="http:www.mysite.com/img/background.jpg">
ما براي تعيين تصوير زمينه اين صفحه قبلاً از اين تگ استفاده مي کرده ايم:
<body background="http://www.neopersia.org/images/index.jpg">
اما اگر بخواهيم صفحه را به پوشه img منتقل کرده يا صفحه جديدي را در پوشه img طراحي کنيم مي توانيم از نام عکس يعني: background.jpg استفاده کنيم و تگ BODY ما به اين صورت در مي آيد:
<body background="background.jpg">
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: maryam